<template>
<!-- 248, 248, 248 -->
  <div class="content-box">
    <!-- <van-nav-bar
      style="background-color: #f8f8f8;"
      title="社保卡领卡/激活网点查询"
    /> -->
    <div style="font-size: 16px; margin: 0 10px 0 10px;">
      <div class="text-box">
        <van-form>
          <article class="form-card">
            <div class="num-box">
              <van-field
                readonly
                clickable
                placeholder="选择地区"
                :value="value"
                name="地区"
                label="地区"
                :colon="true"
                input-align="right"
                @click="chooseRegion"
              />
              <span class="arrow"></span>
            </div>
            <div class="num-box">
              <van-field
                clickable
                readonly
                placeholder="选择银行类型"
                :value="value1"
                name="银行类型"
                label="银行类型"
                :colon="true"
                input-align="right"
                @click="chooseBank"
              />
              <span class="arrow"></span>
            </div>
            <!-- <div class="num-box">
              <van-field
                clickable
                readonly
                placeholder="选择网点类型"
                disabled
                :value="value2"
                name="选择网点类型"
                label="网点类型"
                label-width="100px"
                :colon="true"
                input-align="right"
              />
              <span class="arrow"></span>
            </div>
            <div class="num-box">
              <van-field
                clickable
                readonly
                placeholder="选择查询类型"
                :value="value3"
                name="查询类型"
                label="查询类型"
                :colon="true"
                input-align="right"
                disabled
              />
              <span class="arrow"></span>
            </div> -->
            <div class="info-box">
              <van-cell-group>
                <van-cell title="网点类型：" value="银行代理网点" />
                <van-cell title="查询类型：" value="领卡/激活" />
              </van-cell-group>
            </div>
          </article>
          <div style="margin: 16px;">
            <van-button
              block
              @click="searchData"
              type="info"
            ><span style="letter-space: 3px;">查 询</span></van-button>
          </div>
        </van-form>
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'searchCard',
  data () {
    return {
      value: '', // 地区
      value1: '', // 银行
      value2: '银行代理网点', // 网点
      value3: '', // 查询类型
      chooseFlag: '', // 判断当前选择
      network: [
        '广州市市民服务和社会保障卡管理中心',
        '驻区服务网点',
        '合作银行',
        '银行代理网点',
        '街镇政务中心服务点',
        '居（村）委',
        '发行服务商'
      ],
      newworkFlag: ['01', '02', '11', '12', '13', '14', '31'], // 网点类型字典标记
      bankCategory: '', // 银行类型，传递到下一页面
      bankType: [],
      bankFlag: [],
      region: [],
      regionFlag: [],
      searchType: ['领卡', '激活'],
      searchForm: {
        bankCode: '', // 所属银行代码
        orgType: '12', // 网点类型
        regionCode: '', // 区县编码
        selectType: '1' // 查询类型，1：新申领领卡；2：新申领激活网点，补换的激活/领卡网点，其他
      },
      columns: [],
      showPicker: false
    }
  },
  methods: {
    // 激活网点查询
    searchData () {
      if (this.isAllSure()) {
        this.$router.push({
          path: 'searchDetail',
          query: {
            searchForm: this.searchForm,
            bankCategory: this.bankCategory
          }
        })
      }
    },
    // 确认是否全部都选择了查询条件
    isAllSure () {
      console.log(this.searchForm)
      if (this.searchForm.regionCode === '') {
        this.$toast.fail('请先选择地区')
        return false
      } else if (this.searchForm.bankCode === '') {
        this.$toast.fail('请先选择银行类型')
        return false
      } else {
        return true
      }
      // else if (this.searchForm.orgType === '') {
      //   this.$toast.fail('请先选择网点类型')
      //   return false
      // } else if (this.searchForm.regionCode === '') {
      //   this.$toast.fail('请先选择查询类型')
      //   return false
      // }
    },
    // 选地区
    chooseRegion () {
      this.columns = this.region
      this.chooseFlag = 'value'
      this.showPicker = true
    },
    // 选银行
    chooseBank () {
      this.columns = this.bankType
      this.chooseFlag = 'value1'
      this.showPicker = true
    },
    // 选网点类型
    chooseNetwork () {
      this.columns = this.network
      this.chooseFlag = 'value2'
      this.showPicker = true
    },
    // 选查询类型
    chooseSearchType () {
      this.columns = this.searchType
      this.chooseFlag = 'value3'
      this.showPicker = true
    },
    onConfirm (value, index) {
      if (this.chooseFlag === 'value') { // 地区
        this.value = value
        this.searchForm.regionCode = String(this.regionFlag[index])
      } else if (this.chooseFlag === 'value1') { // 银行类型
        this.value1 = value
        this.bankCategory = value
        this.searchForm.bankCode = this.bankFlag[index]
      } else if (this.chooseFlag === 'value2') { // 网点类型
        this.value2 = value
        this.searchForm.orgType = this.newworkFlag[index]
      } else if (this.chooseFlag === 'value3') { // 查询类型
        this.value3 = value
        this.searchForm.selectType = String(index + 1)
        console.log(this.searchForm)
      }
      this.showPicker = false
    },
    // 查询字典中银行类型
    searchBankType () {
      this.$http.get('listData', {
        dictType: 'bank_code'
      }).then(res => {
        res.rows.forEach(value => {
          this.bankType.push(value.dictLabel)
          this.bankFlag.push(value.dictValue)
        })
      })
    },
    // 查询字典中地区类型
    searchRegion () {
      this.$http.get('listData', {
        dictType: 'region_code'
      }).then(res => {
        console.log(res.rows)
        res.rows.forEach(value => {
          this.region.push(value.dictLabel)
          this.regionFlag.push(value.dictValue)
        })
      })
    }
  },
  mounted () {
    this.searchBankType()
    this.searchRegion()
  }
}
</script>

<style lang="less" scoped>
.content-box{
  // background-color: red;
  min-height: 100vh;
  background-color: #f8f8f8;
  .text-box{
    padding-top: 10px;
    .form-card{
      & /deep/ .van-cell{
        color: #969799;
      }
      & /deep/ .van-cell__title {
        color: #969799;
      }
      & /deep/ .van-cell__value{
        color: #000;
      }
      & .van-cell-group{
        margin: -5px;
        background-color:transparent;
      }
      & .van-cell-group{
        background-color: transparent;
      }
      .info-box{
        padding: 5px;
      }
    }
  }
  .num-box{
    position: relative;
    .arrow{
      position: absolute;
      top: 45%;
      right: 1%;
      display: inline-block;
      width: 0;
      height: 0;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-top: 5px solid #1769ff;
    }
  }
}
</style>
